<!-- Toast 提示 -->
<div class="toast position-fixed top-0 start-50 translate-middle-x mt-3 text-center z-3" id="toast"
     data-bs-delay="1500">
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

<script>
  function showToast({
                       msg = 'Hello, world! This is a toast message.',
                       color = 'primary'
                     }) {
    const myToastEl = document.querySelector('#toast')
    const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)
    myToastEl.querySelector('.toast-body').innerHTML = msg
    // 动态移除旧类名，添加新类名
    $('#toast').removeClass(function (i, className) {
      return className.split(' ').filter(x => x.startsWith('text-bg-'))
    }).addClass('text-bg-' + color)
    // 展示 Toast
    myToast.show()
  }
</script>